<!-- 新增/编辑 -->
<template>
  <view>
    <aster-back font-color="#333" :show-title="true" :title="title" />
    <view class="address">
      <uni-forms ref="addressForm" :modelValue="addressData" :label-width="80">
        <uni-forms-item label="收货人" name="consignee">
          <uni-easyinput
            v-model="addressData.consignee"
            placeholder="请填写收货人姓名"
            :clearable="false"
          />
        </uni-forms-item>
        <uni-forms-item label="手机号码" name="mobile">
          <uni-easyinput
            v-model="addressData.mobile"
            placeholder="请输入收货人手机号"
            :clearable="false"
          />
        </uni-forms-item>
        <uni-forms-item label="所在地区" name="area">
          <view class="address__area" @click="() => (showArea = true)"> {{ listen_area }} </view>
        </uni-forms-item>
        <uni-forms-item label="详细地址" name="address">
          <uni-easyinput
            v-model="addressData.address"
            type="textarea"
            placeholder="乡镇、街道、楼牌号等"
            :clearable="false"
          />
        </uni-forms-item>
      </uni-forms>
      <view class="address__default">
        <view>设为默认收货地址</view>
        <view style="padding-right: 40rpx">
          <aster-switch :value="switchValue" @change="change" />
        </view>
      </view>
      <view class="address__btn">
        <button @click="submit()">保存</button>
      </view>
    </view>
    <aster-area
      :show="showArea"
      :default-value="addressData.area"
      @confirm="area_confirm"
      @cancel="area_cancel"
    />
  </view>
</template>
<script setup lang="ts">
  import AsterBack from '@/components/common/aster-back.vue';
  import AsterArea from '@/components/area/aster-area.vue';
  import AsterSwitch from '@/components/common/aster-switch.vue';
  import { addAddress, editAddress, getAddressInfo } from '@/services/api/user/address';
  import { AddressModel } from '@/services/model/addressModel';
  import { Toast } from '@/utils/uniapi/prompt';
  import { onLoad } from '@dcloudio/uni-app';
  import { computed, onBeforeUnmount, reactive, ref } from 'vue';
  import { areaList } from '@vant/area-data';
  import { area_list, area_text } from '@/utils';
  import { isEmpty } from '@/utils/is';
  import { router } from '@/utils/router';
  import { ResultEnum } from '@/enums/httpEnum';

  const areaData = area_list(areaList);

  const addressForm = ref();
  const title = ref('');
  const addressData = reactive<AddressModel>({
    id: undefined,
    consignee: '',
    mobile: '',
    area: '',
    address: '',
    default: '0',
  });
  const switchValue = ref(false);

  onLoad((options: any) => {
    title.value = options.title;
    if (options.id) {
      getAddressInfo(options.id).then(({ data }) => {
        if (data.code == ResultEnum.SUCCESS) {
          addressData.id = data.data.id;
          addressData.consignee = data.data.consignee;
          addressData.mobile = data.data.mobile;
          addressData.area = data.data.area;
          addressData.address = data.data.address;
          addressData.default = data.data.default;
          switchValue.value = data.data.default == '1';
        }
      });
    }
  });

  const listen_area = computed(() => {
    return isEmpty(addressData.area) ? '' : area_text(addressData.area, areaData);
  });

  /** 地区 */
  const showArea = ref(false);
  const area_confirm = (e: any) => {
    addressData.area = e.value[2].value;
    showArea.value = false;
  };
  const area_cancel = (e: any) => {
    showArea.value = false;
  };

  const timer = ref();

  const submit = () => {
    if (!validateForm()) return;
    if (addressData.id && addressData.id > 0) {
      editAddress(addressData).then(({ data }) => {
        if (data.code == ResultEnum.SUCCESS) {
          Toast('保存成功');
          timer.value = setTimeout(() => {
            router.back();
          }, 1000);
        } else {
          Toast(data.message);
        }
      });
    } else {
      addAddress(addressData).then(({ data }) => {
        if (data.code == ResultEnum.SUCCESS) {
          Toast('保存成功');
          timer.value = setTimeout(() => {
            router.back();
          }, 1000);
        } else {
          Toast(data.message);
        }
      });
    }
  };

  const validateForm = () => {
    if (isEmpty(addressData.consignee)) {
      Toast('请填写收货人');
      return false;
    }
    if (isEmpty(addressData.mobile)) {
      Toast('请填写收货人手机号');
      return false;
    }
    if (isEmpty(addressData.area)) {
      Toast('请选择收货人所在地区');
      return false;
    }
    if (isEmpty(addressData.address)) {
      Toast('请填写收货人详细地址');
      return false;
    }
    return true;
  };

  const change = (e: any) => {
    switchValue.value = e;
    if (e) {
      addressData.default = '1';
    } else {
      addressData.default = '0';
    }
  };

  /** 页面销毁前清除定时器 */
  onBeforeUnmount(() => {
    clearInterval(timer.value);
  });
</script>
<style lang="scss" scoped>
  page {
    padding: 0 20rpx;
  }

  .address {
    padding: 20rpx;

    &__default {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      padding: 20rpx 10rpx;
      border-radius: 10rpx;
    }

    &__btn {
      margin: 20rpx 0;

      button {
        width: 100%;
        color: #fff;
        display: inline-block;
        font-size: 34rpx;
        background-color: #ff6a6c;
      }
    }

    &__area {
      display: flex;
      align-items: center;
      flex: 1;
      text-align: left;

      border-color: rgb(229, 229, 229);
      background-color: #fff;
      border-radius: 4px;
      width: 100%;
      height: 35px;
      font-size: 14px;
      padding: 0 10px;
    }
  }
</style>
